<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/jquery/jquery.js"></script>
</head>

<body>
    <div id="mydiv" style="border:1px solid black;padding:20px;"></div>
    <input type="button" value="get" onclick="sendAjax1()">
    <input type="button" value="post" onclick="sendAjax2()">
    <input type="button" value="script" onclick="sendAjax3()">
    <ul>
        <li onclick="changePage('home')">HOME</li>
        <li onclick="changePage('user')">USER</li>
        <li onclick="changePageOther()">static</li>
    </ul>
    <script>
        /*   
            参数
                url : 请求地址
                data : 可选参数 , 定义请求参数 => $.ajax 的配置的 data 规则一致
                success : 可选参数 , 定义成功后的数据回调 => $.ajax 的配置的 success 规则一致
                dataType : 可选参数 , 设置请求响应数据类型 ( 只能使用jquery预定义的结果类型 ) => $.ajax 的配置的 dataType 规则一致

                $.get(url [,data] [,success] [,dataType]) 发送简单定义的 get http 请求
                $.get(url)
                $.get(url,data)
                $.get(url,data,success)
                $.get(url,data,dataType)  
                
        */

        function sendAjax1() {

            // $.get(url [,data] [,success] [,dataType])
            $.get("/jquery/get", { name: "alice", age: 20 }, function (data) {
                console.log(data);
            }, "json");
        }
        function sendAjax2() {

            // $.post(url [,data] [,success] [,dataType])
            $.post("/jquery/get", { name: "alice", age: 20 }, function (data) {
                console.log(data);
            }, "json");
        }

        function sendAjax3() {

            //$.getScript( url [, success] )
            $.getScript("/jquery/script");
        }


        // 元素的jquery对象.load( url [, data ]  ) 
        function changePage(name){
            $("#mydiv").load("/jquery/myPage",{"name":name});
        }
        function changePageOther(){
            $("#mydiv").load("/01.ajax的基本使用.html");
        }
    </script>
</body>

</html>